@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a  onclick="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{ title }}</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="/home/member/index" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
     <div class="my-nav-bar">
        <ol class="am-breadcrumb">
          <li><a href="/home/stores/index">门店中心</a></li>
          <li><a href="">伙伴</a></li>
        </ol>
    </div>
    <div class="flow-default am-cf cart-panel" id="LAY_demo1">
    </div>
    @include('Home.foot')
</div>
</body>
<script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
<script>
    layui.use('flow', function(){
        var flow = layui.flow;
        flow.load({
            elem: '#LAY_demo1' //流加载容器
            // ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,done: function(page, next){ //执行下一页的回调
                //模拟数据插入
                setTimeout(function(){
                    var lis = [];
                    var order = app.order;
                    app.nextData();
                    for(var i = 0; i < app.order.length; i++){
                        lis.push(
                            "<div class='withdrawals-panel'>"+
                            "<div class='uchome-info-uimg'   style='width: 20%' >"+
                            " <img src='/img/home/user/uhomeapp11.png' style='width: 50px;height: 50px;margin: 14px'/>"+
                            "</div>"+
                            "<div class='groupby-info-panle' style='width: 28%'>"+
                            "<h2><a >"+order[i].uid+"</a></h2>"+
                            "</div>"+
                            "<div class='groupby-info-panle' style='width: 52%'>"+
                             "<p><h2>绑定详情</h2></p>"+
                            "<p>消费订单号："+order[i].ordersn+"</p>"+
                            "<p>消费金额："+order[i].price+"</p>"+
                            "<p>绑定时间："+order[i].paytime+"</p>"+
                            "<p>详情描述："+order[i].uid+"在"+order[i].ordertype+"第一次在您的门店消费了"+order[i].price+"元.</p>"+
                            "</div>"
                            +"</div>"
                        )
                    }
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join('') , page <= app.pages.last_page); //假设总页数为 10
                }, 500);
            }
        });
    });

    var app = new Vue({
        el: "#app",
        data: {
            title: '门店伙伴',
            order:{
            },
            pages:{
                current_page:0,
            },
            id:''
        },
        methods: {

            //初始化
            initialize: function () {
                $.post("/home/stores/stores", { '_token': '{{csrf_token()}}', class:'friends' }, function (res) {
                    if (res.code) {
                        app.pages = res.data;
                        app.order = res.data.data;  
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            //下一页
            nextData:function(){
                //page:app.pages.per_page+1
                var rico = this
                $.post("/home/stores/stores", {'_token': '{{csrf_token()}}',class:'friends', page:app.pages.current_page+1
                }, function (res) {
                    if (res.code) {
                        app.pages = res.data
                        app.order = res.data.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            }
        },

        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
</html>
